<template>
    <div class="goods-item">
        <img :src="product.url" alt="">
        <br>
        <br>
        <div class="goods-info">
            <p>
              {{product.title}}
            </p>
            <span class="price">价格：<small>￥</small>{{product.price}}</span>
            <span class="collect">
                <span>库存：{{product.collectCount}}</span>
                <br>
                <br>
            </span>
        </div>
    </div>
</template>

<script>
import {reactive,toRefs} from "vue";

export default {
    props:{
        product:Object,
        default(){
            return {}
        }
    },
    setup () {
        const state = reactive({
            count: 0
        })

        return {
            ...toRefs(state)
        }
    }
}
</script>

<style>
.goods-item{
    width: 46%;
    padding-bottom: 40px;
    position: relative;
}
.goods-item img{
    width: 100%;
    border-radius: 5px;
}

.goods-info{
    font-size: 12px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
}
.goods-info p{
    overflow: hidden;
    text-overflow: ellipsis;
    write-space: nowrap;
    margin-bottom: 3px;
}
.goods-info .price{
    color: red;
    margin-right: 20px;
}
.goods-info .collect{
    position: relative;
}

</style>
